<template>

  <el-container>
    <vueToTop type="4" size="50" color="#b640ff" bottom="100"></vueToTop>
    <el-header style="height: 70px">
      <detail-head/>

      <!--左边搜索弹窗-->
      <el-drawer
        @close="closeDrawer"
        :visible.sync="$store.state.drawer"
        direction="ltr" >
       <template class="drawer_title" slot="title">
          <p v-if="$store.state.resultHit">共查询到<span style="color: red">{{$store.state.resultHit}}</span>条结果!</p>
          <p v-if="!$store.state.resultHit"><span style="font-size: 30px" class="iconfont icon-face-fang-jiong"></span>&nbsp;&nbsp;&nbsp;&nbsp;重新更换关键词试一下吧!!!</p>
       </template>
        <div class="search_result" style="height: 100%"  v-if="$store.state.resultHit">
          <el-scrollbar style="height: 100%">
               <ul>
                 <li v-for="(item,index) in $store.state.drawerSearchResult" :key="index">
                   <el-tooltip  v-bind:disabled="item.value|countLength" class="item" visible-arrow="false" :open-delay="delay" effect="light" :content="item.value" placement="right-start">
                   <el-link type="primary" @click="goto(item.id)">{{item.value}}</el-link>
                   </el-tooltip>
                 </li>


               </ul>
          </el-scrollbar>
        </div>
      </el-drawer>

    </el-header>
    <el-container >
      <el-aside width="200px" style="position: relative">
                     <!--侧边-->
        <div class="info"><p>博客信息</p></div>
        <el-table
          border
          :data="tableData"
          :header-row-style="theadObj"
          style="width: 200px">
          <el-table-column
            prop="date"
            width="110">

            <template slot-scope="scope">
              <i class="el-icon-time"></i>
              <span>{{ scope.row.date }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="name"
            width="89">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="scope.row.name+''" placement="bottom-end">
                <el-tag type="info">{{scope.row.name}}</el-tag>
              </el-tooltip>

            </template>
          </el-table-column>

        </el-table>

        <!--实现 fix 效果-->
         <ul class="fix">
           <li>
             <el-badge value="here" class="item">
             <el-button type="warning" v-if="!thumpUp" @click="Ilike()"  class="" icon="iconfont icon-dianzan" circle></el-button>
             <el-button type="warning" style="color: red" v-if="thumpUp"  icon="iconfont icon-dianzan" circle></el-button>
             </el-badge>
           </li>
           <li>
             <el-badge is-dot class="item">
             <el-button type="warning" icon="iconfont icon-qq3"  circle></el-button>
             </el-badge>
           </li>
           <li>
             <el-badge is-dot class="item">
               <el-button type="warning" icon="iconfont icon-wei-xin-wang-ye-ban"  circle></el-button>
             </el-badge>
           </li>
           <li>
             <el-badge is-dot class="item">
               <el-button type="warning" icon="iconfont icon-pinglun-copy" circle @click="articleRely=true"></el-button>
             </el-badge>
           </li>
           <li>
             <el-badge is-dot class="item">
             <el-button type="warning"  circle @click="$router.push('/blog')">主</el-button>
             </el-badge>
           </li>




         </ul>


      </el-aside>
      <el-main >
        <el-card class="box-card" :body-style="card_body">
          <div slot="header" class="clearfix">
            <ul>
               <li>
                 <h1 >{{content.title}}</h1>
                 <el-divider></el-divider>
               </li>

               <li id="articleInfo">
                 <el-link type="info" :underline="false">
                   <!--这里改用原创的图标-->
                   <span class="iconfont icon-zuozhe"></span>{{blog.author}}
                 </el-link>
                 <el-link type="info" :underline="false">
                   <span class="iconfont icon-shijian"></span>{{content.createTime|dateFilter}}
                 </el-link>
                 <el-link type="info" :underline="false">
                   <span class="iconfont icon-biaoqian6"></span>{{dics.value}}
                 </el-link>
                 <el-link type="info" :underline="false">
                   <span class="iconfont icon-liulan2"></span>{{blog.view}}次浏览
                 </el-link>
                 <el-link type="info" :underline="false">
                   <span class="iconfont icon-pinglun3"></span>{{blog.comment}}条评论
                 </el-link>
               </li>
            </ul>
          </div>
          <div>
            <div id="main">
              <mavon-editor  :ishljs = "true" v-model="content.content"
                            style="min-height: 600px"
                             :subfield = "false"
                             :defaultOpen = "'preview'"
                             :toolbarsFlag = "false"
                             :editable="false"
                             scrollStyle
              />
              <!--:value="detailContent.content"：引入要转换的内容-->
              <!--:subfield = "false"：开启单栏模式-->
              <!--:defaultOpen = "'preview'"：默认展示预览区域-->
              <!--:toolbarsFlag = "false"：关闭工具栏-->
              <!--:editable="false"：不允许编辑-->
              <!--scrollStyle="true"：开启滚动条样式(暂时仅支持chrome)-->

            </div>
          </div>
        </el-card>

         <!------评论--->
         <div>
           <el-dialog title="博客评论:" :visible.sync="articleRely" @open="readName" @close="writeToStorage">
             <!--<el-form :model="form">-->
           <el-form :inline="true" >
             <el-form-item label="昵称">
               <el-input v-model="$store.state.name" placeholder="输入合法的昵称"></el-input>
             </el-form-item>
             <el-form-item label="邮箱">
               <el-input v-model="$store.state.email" placeholder="请留下有营养的评论吧!"></el-input>
             </el-form-item>
           </el-form>


             <el-form >

               <section>
                 <!--:value="myText"-->
                 <vue-emoji ref="emoji" width="100%" @input="onInput"  :value="myText"/>
               </section>
             </el-form>
             <div  class="login_quick">
               <el-button type="success" icon="iconfont icon-xingzhuang" circle></el-button>
               <el-button type="success" icon="iconfont icon-qq3" circle></el-button>
             </div>
             <div slot="footer" class="dialog-footer">
               <el-button @click="articleRely = false">取 消</el-button>
               <el-button type="primary" @click="submitArticleComment()">确 定</el-button>
             </div>
           </el-dialog>
         </div>
         <div>
             <!--评论啊。。。-->
             <article-comment id="comment"/>
         </div>
        <!--版权声明。。-->
        <div class="detail_desc">
         <p>©  2019-2022 Copyright 何大辉博客  hyh</p>
          <p><span>powerBy:&nbsp;&nbsp;&nbsp;www.runtimeexception.cn</span></p>
          <!--<p><span>转载请说明出处</span></p>-->
        </div>

      </el-main>
    </el-container>

  </el-container>

</template>

<script>
  import  articleComment from  '../components/articleComment'
  import VueEmoji from '../common/VueEmoji'
  import  commonUtils  from  '../common/commonUtils'
   import  detailHead from '../components/detailHead'
  export default {
    name: 'articleDetail',
    components:{
        detailHead,
      'vue-emoji': VueEmoji,
      articleComment

    },
    data(){
      return{
        thumpUp:false, //用于做点赞按钮的切换
        tableData: [],
        articleRely:false, // 评论的弹窗控制
        theadObj:{display:"none"},
        like:true,
        myText: '',
        myTextValue: '',
        content: {},
        blog: '',
        dics: '',
        delay:500, // 文本提示延迟显示
        card_body:{padding:'0'},
        likeAritcle:true
      }
    },
    methods:{
      //提交和文章相关的评论。
      submitArticleComment(){

        if (!this.$store.state.name) {
          commonUtils.AlertOperationSuccess('请先留下名讳!', 1000)
          return;
        }
        if (!this.$store.state.email) {
          commonUtils.AlertOperationSuccess('请输入邮箱!', 1000)
          return;
        }
        if (!this.myTextValue) {
          commonUtils.AlertOperationSuccess('来了就说点什么吧!', 1000)
          return;
        }
        var model ={
          nickName:this.$store.state.name,
          email:this.$store.state.email,
          avatar:this.$store.state.avatar,
          article:this.$route.params.id,
          content:this.myTextValue
        }
        if(this.$store.state.articleCommentList){
           //如果长度为0,则认为还没有从数据中获取数据。
        //   this.$store.dispatch("loadingArticlCommentList",this.$route.params.id).then(() =>{
        //     this.$store.dispatch("submitArticleComment",model)
        //   })
        // }else {
          this.$store.dispatch("submitArticleComment",model)
        }

        this.clearTextarea()//清除评论。
        this.articleRely=false
        this.myTextValue = ''

      },

      //将相关的信息写入到本地中。
      readName(){
        //从本地读取数据。
        var item = localStorage.getItem('session_obj')
        console.log("本地读取数据")
        if (item) {
          var parse = JSON.parse(item)
          if(parse){
            this.$store.state.name=parse.name;
            this.$store.state.email=parse.email;
            this.$store.state.avatar=parse.avatar;
          }
        }
      },
      writeToStorage(){
        console.log("本地写入数据")
        if (this.$store.state.name && this.$store.state.email) {
          var obj={
            name:this.$store.state.name,
            email:this.$store.state.email,
            avatar:this.$store.state.avatar
          }
          localStorage.setItem("session_obj",JSON.stringify(obj))
        }
        this.clearTextarea()
        this.myTextValue = ''
      },
      //点赞。
      Ilike(){
        this.like = !this.like
        if (this.likeAritcle) {
          this.axios.post("/blog/thumbUp?id="+this.$route.params.id).then(success =>{
            if (success.data.code == 0) {
              commonUtils.AlertSuccessMsg('点赞成功！')
              this.likeAritcle = false;
              this.thumpUp=true;
            }else {
              console.log("点赞失败!")
            }
          }).catch(error =>{
              console.log("点赞失败!")
          })
        }

      },
      //初始化统计数据。
      initCount(){
        var id = this.$route.params.id
        console.log("路由参数==》"+id)
        this.axios.post("/blog/initCountData?id="+id).then(success =>{
           if (success.data.code == 0) {
                 this.tableData=success.data.result;
           }else {
              commonUtils.AlertErrorMsg("获取文章统计数失败!")
           }
         }).catch(error =>{
             console.log("无法获取该文章的统计信息。")
         })
      },
      clearTextarea(){        //这两个方法和emjo 插件有关。
        this.$refs.emoji.clear()
      },
      onInput(event){
        console.log(event)
        console.log(event.data)
        this.myTextValue=event.data;
      },
      loadingArticle(){
        var loading = commonUtils.AlertLoading("正在提取数据,请看官稍等。。。")
        var id =this.$route.params.id;
        this.axios.post("/blog/getArticle?id="+id).then( success =>{
          if (success.data.code == 0) {

            this.content = success.data.result.content
            this.blog= success.data.result.blog
            this.dics =success.data.result.dics
          }
          if(success.data.code == -2){
            commonUtils.AlertOperationSuccess(success.data.result, 1000)
          }
          //触发加载评论列表。
          this.$store.dispatch("loadingArticlCommentList",id)
          loading.close()
        }).catch(error =>{
            commonUtils.AlertErrorMsg("查询不到该文章的数据,请联系管理员!")
          loading.close()
        })


      },
      //关闭drawer 事件
      closeDrawer(){
        this.$store.state.drawer=false,
          this.$store.state.drawerSearchResult='',
          this.$store.state.resultHit=''
      },
      //跳转
      goto(id){
        this.closeDrawer()
        console.log('跳转id==>' + id)
          this.$router.push("/detail/"+id)
      }
    },
    watch:{  //监视路由
      '$route':function (to ,from) {
        if (to.params.id != from.params.id) {
          console.log("要去的地方=>"+to.params.id)
            console.log("两次路由地址不等！")
          this.$route.params.id = to.params.id
          //监视路由，路由相同而参数不同，就监视将本地的参数改变，在重新加载数据。
          this.loadingArticle();
          this.$store.dispatch("getPreviousNext",this.$route.params.id)
        }

      }
    },
    mounted () {
      this.loadingArticle()
      this.initCount();
      this.$store.dispatch("getPreviousNext",this.$route.params.id)
    },
    //时间过滤器，用于处理{{}}  v-model
    filters:{
      dateFilter: function (value) {
        //处理格式
        if (value) {
          var split = value.split(' ')
          value = split[0]
         var dataStr = value.split('-')
          return dataStr[0] + '年' + dataStr[1] + '月' + dataStr[2] + '日'
        }
        return value
      },
      //计算长度
      countLength(value){
        if (value.length > 23) {
          console.log("长度==>"+value.length)
            return false;
        }
        return true

      }
    }

  }
</script>

<style scoped>

  .el-container{
    margin-left: 3% ;
    margin-right: 3%;

  }
  .el-header, .el-footer {
    background-color: #B3C0D1;
    color: #333;
    text-align: center;

  }

  .el-table thead tr{
      display: none;
  }

  .el-aside {
    background-color: #D3DCE6;
    color: #333;
    text-align: center;
    overflow-x: hidden;
    /*line-height: 200px;*/
  }

  .el-main {
    background-color: #E9EEF3;
    color: #333;
    overflow: no-display;
    overflow: scroll;
    overflow-x:hidden;
    overflow-y: hidden;
    /*text-align: center;*/
    /*line-height: 160px;*/

  }

  body > .el-container {
    margin-bottom: 40px;
  }

  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }

  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  }

  .login_quick{
       margin-top: 10px;
    width: 100%;
    text-align: center;
  }
  .login_quick .el-button:nth-of-type(1){
     /*margin-left: 25%;*/
    margin-right: 1%;
  }
/*-----自定义样式-----*/
  .table_thead{
     height: 0;
  }
  .clearfix{
      width: 100%;
      height: 130px;
    /*background-color: green;*/
  }
  .clearfix ul li{
      list-style: none;

  }
  .clearfix ul li:nth-of-type(1){
     width: 100%;
     height: 90px;
     /*background-color: red;*/
  }
  .clearfix ul li h1{
    width: 100%;
    height: 90px;
    text-align: justify;
    margin-left: 1%;
    line-height: 90px;
    font-family: "幼圆","华文宋体","华文楷体","黑体","Times New Roman"  ;
    font-size: 20px;
  }
  .el-divider{
     /*--清除原有的方式--*/
     margin: 0;
  }
  .el-main{
    padding: 0;
  }

  .clearfix ul li:nth-of-type(2){
      width: 100%;
      height: 40px;
      line-height: 40px;
    text-align: left;
  }
  .el-link{
      margin-left: 1%;
  }

  .el-card__header{
     padding-bottom: 5px;
  }

  .v-show-content .scroll-style{
    padding: 0;
  }

  /*th{*/
    /*!*----不知道如何控制高度，就这样显示--*!*/
    /*display: none*/
  /*}*/

  .info{
     width: 100%;
     height: 50px;
     /*background-color: red;*/
  }
  .info p{
      width: 100%;
      height: 50px;
      line-height: 65px;
    text-align: left;
    padding-left: 10%;
    font-family: "幼圆","华文宋体","华文楷体","黑体","Times New Roman"  ;
    font-size: 20px;
  }
  /*--固定标题--*/
  .fix{

     width: 14%;
     height: 180px;
     /*border: 1px solid royalblue;*/
    position: absolute;
     /*left: 10%;*/
     /*top: 54%;*/
       right: 50px;
      margin-top: 15px;

  }

  .fix li{
      /*border-bottom: 1px solid green;*/
      width: 100%;
      height: 60px;
      list-style: none;

  }
  .fix li .el-button{
       float: right;
  }




  /*------版权声明-----*/
  .detail_desc{
    width: 95%;
    height: 30px;
    line-height: 30px;
    padding-left: 5%;
    background-color: #ffffff;
    margin-top: 10px;
    /*border-radius: 5px;*/
    background-image:linear-gradient(to left, #ff2d55, #d325f3, #4c84d9, #5afaf3, #1bff00, #edf93a, #f3c133)

  }
  .detail_desc p{
     width: 50%;
     height: 100%;

  }
  .detail_desc p:nth-of-type(1){
      float: left;

  }
  .detail_desc p:nth-of-type(2){
    float: right;
     position: relative;

  }
  .detail_desc p:nth-of-type(2) span{
      position: absolute;
      right: 20%;
     /*display: block;*/

  }



   .thumpUp{
     color: red;
   }
  .thumpDown{
    color: #ffffff ;
  }

/*----------搜索结果--------*/

  .search_result{
       /*background-color: red;*/
  }
  .search_result ul li{
     text-indent: 8px;
  }
  .search_result ul li  {
    list-style: none;
       width: 98%;
    margin: 1%;
    height: 40px;
    font-size: 16px;
    line-height: 40px;
    /*border: 1px dashed red;*/
    /*border-radius: 5px;*/

  }
  .search_result ul li .el-link{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    border-bottom: 0;
    width: 100%;
  }

  .search_result ul li:hover{
     background-color: #F2F6FC;
  }
  .search_result ul li .el-link{
       font-size: 16px;
  }

  .search_result ul li:nth-of-type(1) {
    /*background-color: royalblue;*/
  }
  .search_result ul li:nth-of-type(2) {
     /*background-color: skyblue;*/
  }

  .search_result .el-scrollbar__wrap {
    overflow-x: hidden;
  }

  .drawer_title{
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    color: #72767b;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-bottom: 32px;
    padding: 20px 20px 0;
  }

  /*------*/
  #articleInfo  .el-link:hover{
       color: #409EFF;
       font-size: 20px;
       transition: 1s ;
    transition-timing-function:ease;
  }




</style>
